<script lang="ts" setup>
import forumPublisher from '@/components/forum-publisher.vue'
</script>

<template>
  <!-- 头部 -->
  <view class="head">
    <image class="head-image" src="/static/user/user.jpg" mode="scaleToFill" />
    <view class="head-data">
      <view class="head-data-name">
        <h1 class="head-data-name-h1">扬可可</h1>
        <view class="head-data-name-text">已实名验证</view>
      </view>
      <view class="head-data-school">武汉大学 | 大四 | 视觉传达设计</view>
    </view>
  </view>

  <!-- 动态 粉丝 关注 -->
  <view class="potential">
    <view class="potential-content" v-for="item in 3" :key="item">
      <h2 class="potential-content-h1">1</h2>
      <text class="potential-content-text">动态</text>
    </view>
  </view>

  <!-- 动态 -->
  <h1 class="school">Ta的动态</h1>
  <view>
  <forumPublisher/>
  </view>
</template>

<style scoped lang="scss">
.head {
  display: flex;

  &-image {
    width: 130rpx;
    height: 130rpx;
    border-radius: 100%;
  }

  &-data {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 40rpx;

    &-name {
      display: flex;
      align-items: center;
      gap: 15rpx;

      &-h1 {
        font-weight: 700;
        font-size: 35rpx;
      }

      &-text {
        font-size: 25rpx;
        padding: 5rpx 15rpx;
        border-radius: 5rpx;
        background-color: #fb9288;
        color: $uni-text-color-inverse;
      }
    }

    &-school {
      font-size: 28rpx;
      color: #949595;
    }
  }
}

.potential {
  display: flex;
  justify-content: space-around;
  margin-top: 50rpx;

  &-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; // 为伪元素定位做准备
    &-h1 {
      font-size: 40rpx;
      font-weight: 700;
    }

    &-text {
      font-size: 25rpx;
      color: #979595;
    }
  }
}

.school {
  font-size: 35rpx;
  font-weight: 700;
  margin-top: 70rpx;
}
</style>